<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            //
            var param={};
            param.pageNo=1;
            function load(){
                param.sname=$("input[name=sname]").val();
                param.qq=$("input[name=qq]").val();
                param.telephone=$("input[name=telephone]").val();
                param.startDate=$("input[name=startDate]").val();
                param.endDate=$("input[name=endDate]").val();
                param.pageNo=$("#pageNo").val();
                console.log(param);

                $.get("studentSearch.cmd",param,function (p) {
                    var $t=$("#queryTable");
                    $t.find("tr:gt(0)").remove();
                    $(".pager a#prev").attr("data-no",p.pageNo-1);
                    $(".pager a#next").attr("data-no",p.pageNo+1);
                    $(".pager a#last").attr("data-no",p.totalPages);
                    $(".pager #jump").val(p.pageNo);

                    if(p.pageNo<=1){
                        $(".pager a#prev").attr("disabled",true);
                    }else{
                        $(".pager a#prev").removeAttr("disabled");
                    }
                    if(p.pageNo<p.totalPages){
                        $(".pager a#next").removeAttr("disabled");
                    }else{
                        $(".pager a#next").attr("disabled",true);
                    }

                    $.each(p.data,function (i,d) {
                        let row=$("<tr></tr>");
                        row.append("<td>"+d.stuno+"</td>");
                        row.append("<td>"+d.sname+"</td>");
                        row.append("<td>"+d.telephone+"</td>");
                        row.append("<td>"+d.qq+"</td>");
                        row.append("<td>"+d.enterdate+"</td>");
                        row.append("<td><a href='#'>删除</a></td>");
                        $t.append(row);
                    });
                });
            }
            load();
            $("#go").click(function () {
                $("form #pageNo").val($(this).prev().val());
                $("#studentForm").submit();
                //return false;
            });

            $(".pager a").click(function () {
                $("form #pageNo").val($(this).attr("data-no"));
                //$("#studentForm").submit();
                load();
                return false;
            });
            $("#search").click(function () {
                $("form #pageNo").val(1);
                load();
                return false;
            });
        });
    </script>
</head>
<body>
<div>
    <form action="studentServlet" method="get" id="studentForm">
        <input type="hidden" name="pageNo" id="pageNo" value="1">
        姓名：<input type="search"  name="sname" value=""/>
        QQ：<input  type="search" name="qq" value=""/>
        手机号：<input  type="search" name="telephone" value=""/>

        入学时间从<input type="date" name="startDate" value=""/>到
        <input type="date" name="endDate" value=""/>
        <input type="submit" value="搜索" id="search"/>
        <a href="stuReg">添加新生</a>
    </form>
</div>
<table border="1" cellpadding="0" cellspacing="0" id="queryTable">
    <tr>
        <th>学号</th><th>姓名</th><th>手机号</th><th>QQ</th><th>入学时间</th><th>操作</th>
    </tr>



</table>
<p class="pager">

    <a href="#" data-no="1" id="first">首页</a>

    <a href="#" data-no="" id="prev">上一页</a>

    <input type="number" min="1" value="" max="" name="pageNo"  id="jump" width="40px" size="4"/><input type="button" id="go" value="go" style="width: 60px;"/>


    <a href="#"  data-no="#" id="next">下一页</a>

    <a href="#" data-no="#" id="last">最后一页</a>
</p>
</body>
</html>
